<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit" ref="form">
      <van-cell-group inset style="margin: 50px 20px 70px 20px">
        <van-field
          v-model="telephone"
          name="telephone"
          label="请输入手机号"
          :rules="rules.telephone"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          block
          type="danger"
          native-type="submit"
          style="border-radius: 20px"
          @click="showConfirm(telephone)"
        >
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { showConfirmDialog } from "vant"; //弹出框
export default {
  data() {
    return {
      telephone: "",
      rules: {
        telephone: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            // 自定义校验规则
            validator: (val) => {
              return /^1[3456789]\d{9}$/.test(val);
            },
            message: "请输入正确格式的用户名(手机号)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onSubmit(values) {
      console.log("submit", values);
      this.$refs.form
        .validate("telephone")
        .then(() => {
          // console.log('成功');
          this.show = true;
          // this.$router.push('/login')
        })
        .catch(() => {
          console.log("error");
        });
      // this.$router.push("/home")
    },
    showConfirm(tel) {
      showConfirmDialog({
        title: "标题",
        confirmButtonColor:"red",  // 确认按钮颜色
        message:
          `将向手机号${this.telephone}发送短信验证码`,
      })
        .then(() => {
          console.log('成功');
          this.$router.push({path:'/registerNext',query:{tel:tel}})
          console.log(tel);
        })
        .catch(() => {
          console.log('失败');
        });
    },
  },
};
</script>
<style scoped></style>
